Offline Web Applications - Part 2: Application Cache | David Tanzer

This mini series about “Offline Web Applications” shows you how to build a web application that your users can use while they are offline. I will give a session about this topic at Herbstcampus 2012.

Part 1 showed you the web application that should be available offline - but isn't yet.
You are reading part two, where we will use the HTML 5 application cache to make all resources available offline.
Part 3 shows you how to develop the application logic using JavaScript
Part 4 will make the application logic available offline using IndexedDB and the IndexedDB JQuery plugin.

No server side components

In the first example we used several server side components: A page class (written in Java) with buttons and text fields. This class was also responsible for loading/storing data. Because we want to implement offline mode, we can not use these server side components. We have to render a simple HTML page. This page is empty right now, we just want to have it available offline. We will implement the new dictionary functionality in part 3 of this series.

I have moved the file “style.css” to the “WebContent” folder of my web application. In this folder I also added a file called “dictionary.html”:

dictionary.html

<!DOCTYPE html>

<html manifest="offline.manifest">
    <head>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <div class="content">
            <h1>German - English dictionary</h1>
            
            <div class="block grey">
                <h2>Add word</h2>
                
                <form id="addForm">
                    <div class="left">
                        <h3>German</h3>
                        <input type="text" id="german"/>
                    </div>
                    <div class="right">
                        <h3>English</h3>
                        <input type="text" id="english"/>
                    </div>
                    <div class="clear"></div>
                    <input type="submit" value="Add"/>
                </form>
            </div>
            
            <div class="block green">
                <h2>Words</h2>
                
                <div class="left">
                    <h3>German</h3>
                </div>
                <div class="right">
                    <h3>English</h3>
                </div>
                <div class="clear"></div>
                
                <div id="wordsList">
                    <div class="left" id="listEntryGerman">German word</div>
                    <div class="right" id="listEntryEnglish">English word</div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </body>
</html>

Wicket

We don’t need the DictionaryPage anymore, so I deleted the java class and the HTML file. I have also removed the home page form the application class:

DictionaryApplication.java

@Override
public Class<? extends Page> getHomePage() {
    return null;
}

Cache-Manifest for offline mode

Notice that the “html” tag has a “manifest” attribute? We need this manifest to make resources available offline. So let’s add the file offline.manifest to the folder “WebContent”:

offline.manifest

CACHE MANIFEST
# Offline cache manifest for the dictionary application

CACHE:
dictionary.html
style.css

And that’s it: Our dictionary page is available offline! Just… it doesn’t work anymore, because all the logic was on the server side, encoded in a wicket page. Stay tuned for part 3, where we’ll implement the new logic for creating and displaying translations!